<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./res/layui-v2.9.1/layui/css/layui.css">

</head>
<body>
    <div class="layui-container">
      <h1>软帝超市管理系统(S-CMS)v1.0</h1>
      <hr>
      <div class="tab">
          <table id="userInfo"></table>
      </div>

    </div>
    <!-- 引入 layui.js -->
    <script src="./res/layui-v2.9.1/layui/layui.js"></script>

    <script type="text/html" id="rowtools">
        <button class="layui-btn layui-bg-blue layui-btn-xs">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-bg-orange layui-btn-xs">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-bg-red layui-btn-xs">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script>
        layui.use(function(){
            //加载表格模块
            let table = layui.table;

            table.render({
                elem:'#userInfo',
                url: 'http://127.0.0.1/list',
                size: 'sm',
                even: 'true',
                title: '管理员信息表', // 设置表格名称主要用于导出文件时
                toolbar: true,  //开启头部工具条
                page: {
                    limit: 2,
                    limits: [2,5,10,15,20]
                },
                cols:[[
                    {type:'checkbox',fixed:'left'},
                    {type:'numbers',title: '序号'},
                    {field:'userid',title:'用户ID',width:80},
                    {field:'username',title:'用户名'},
                    {field:'password',title:'密码'},
                    {field:'salt',title:'随机盐'},
                    {title: '操作',templet:'#rowtools',width: 280,align:'center'}
                ]]
            })
        })
    </script>

</body>
</html>